<template>
  <!-- <div class="bottom-bar"> -->
  <!-- 底部导航栏组件 -->
  <van-tabbar v-model="active" route class="bottom-bar">
    <van-tabbar-item v-for="(item, index) in data" :key="item.id" class="bottom-bar__content">
      <van-image
        :class="item.name ? 'bottom-bar__content__img': 'bottom-bar__content__img2'"
        :src="active === index? item.activeImageUrl?item.activeImageUrl:item.imageUrl : item.imageUrl"
        @click="aaa"
      >
        <template>
          <div class="bottom-bar__content__img__text">{{ item.name }}</div>
        </template>
      </van-image>
    </van-tabbar-item>
  </van-tabbar>
  <!-- </div> -->
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      data: []
    }
  },
  watch: {
    '$store.state.homeList.bottomMenu': {
      // 初次渲染立即获得一次数据
      immediate: true,
      handler(val) {
        this.data = val
      }
    }
  },
  methods: {
    aaa(a) {
      console.log(a)
    }
  }
}
</script>

<style lang="less">
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 108px;
  background-color: #fff;
  &__content {
    &__img {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-top: 17px;
      height: 48px;
      .van-image__img {
        width: 48px;
        height: 48px;
      }
      &__text {
        font-size: 22px;
        color: #1a1919;
        text-align: center;
        margin-top: 4px;
      }
    }
    &__img2 {
      width: 60px;
      height: 60px;

    }
  }
}
</style>
